<template>
  <el-dialog
    title="发布文章"
    :visible="show"
    width="30%"
    top="15%"
    @close="close">
    <div class="add-blog-dialog-box">
      <div class="add-blog-item">
        <div class="add-blog-item-title">文章类型：</div>
        <el-radio-group v-model="openStatus">
          <el-radio :label="0">公开</el-radio>
          <el-radio :label="1">私密</el-radio>
        </el-radio-group>
      </div>

      <div class="add-blog-item" v-if="openStatus == 1">
        <div class="add-blog-item-title">权限码：</div>
        <el-input size="small" v-model="priCode" maxlength="4" placeholder="请输入权限码（可选）" show-word-limit/>
      </div>

      <div class="add-blog-item">
        <div class="add-blog-item-title">文章分类：</div>
        <el-select 
          size="small" 
          v-model="selectTag" 
          filterable 
          clearable
          :disabled="tagList.length <= 0" 
          placeholder="请选择文章分类">
          <el-option
            v-for="item in tagList"
            :key="item.tagId"
            :label="item.tagName"
            :value="item.tagId">
          </el-option>
        </el-select>

        <div class="add-blog-tag" @click="addTag">添加分类</div>
      </div>
    </div>
    <span slot="footer" class="add-menu-dialog-footer">
      <el-button type="primary" size="medium" @click="commit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Api from "@/utils/api.js"
import LocalStorage from "@/utils/localStorage.js"
export default {
  props: ["show", "blogStatusInfo"],

  data(){
    return{
      openStatus : 1,
      priCode: null,
      selectTag:'',
      tagList:[],
    }
  },

  watch: {
    show(newV, oldV) {
      if(newV){
        this.openStatus = this.blogStatusInfo.openStatus | 0;
        this.priCode = this.blogStatusInfo.priCode;
        this.getTagList(this.blogStatusInfo.tagId)
      }
    } 
  },

  methods:{
    close(){
      this.$emit('close')
    },

    commit(){
      if(this.priCode && this.priCode.length != 4){
        this.$message.warning("权限码长度不够！");
        return
      }

      // 缓存历史标签
      LocalStorage.setItem("ADD_BLOG_TAG_ID", this.selectTag)

      // 提交
      this.$emit('commit', {
        openStatus : this.openStatus,
        priCode : this.priCode,
        tagId: this.selectTag
      })
    },

    getTagList(tagId){
      let newTagId = tagId
      this.$axios.post(Api.BLOG_TAG_LIST)
      .then(res =>{
        this.tagList = res

        // 没有标签，取历史使用标签
        if(!newTagId){
          newTagId = LocalStorage.getItem("ADD_BLOG_TAG_ID")
        }

        // 列表匹配
        if(newTagId){
          this.tagList.map(item => {
            if(item.tagId == newTagId){
              this.selectTag = item.tagId
            }
          })
        }else{
          if(this.tagList && this.tagList.length > 0){
            this.selectTag = this.tagList[0].tagId
          }
        }

      })
      .catch(res =>{
        this.$message.warning(res.message);
      })
    },

    addTag(){
        this.$prompt('请输入分类名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.$axios.post(Api.BLOG_TAG_ADD, {tagName: value})
          .then(res =>{  
            this.$message.success(`添加分类：${value} 成功！`); 
            this.getTagList(res.data)
          })
          .catch(res =>{
            this.$message.warning(res.message);
          })
        }).catch(() => {});
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.add-blog-dialog-box{

  .add-blog-item{
    font-size: 15px;
    color: #4d4d4d;
    margin-bottom: 20px;
    .flex-center-start();

    .add-blog-item-title{
      width: 80px;
      text-align-last: justify;
    }

    .el-input--small{
      width: 200px;
    }

    .add-blog-tag{
      font-size:14px;
      color: #409EFF;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

// 添加菜单弹框
.add-menu-dialog-footer{
  .flex-center-center();
  
  .el-button{
    width: 200px;
  }
}
</style>
